<template>
  <div class="groupIndex">
    <el-dialog :title="isChange?'修改组':'新增组'" :visible.sync="dialogs.addGroup" width="30%">
      <GroupAdd
        @flush-data="searchGroup"
        v-model="dialogs.addGroup"
        :isChange.sync="isChange"
        :fGroup.sync="tempGroup"
      ></GroupAdd>
    </el-dialog>

    <el-dialog title="组织关系树" :visible.sync="dialogs.groupConfig" width="30%">
      <GroupRelationalTree :fGroupId.sync="tempGroupId"></GroupRelationalTree>
    </el-dialog>

    <el-dialog title="组织成员" :visible.sync="dialogs.groupUser" width="30%">
      <GroupUser :fGroupId.sync="tempGroupId"></GroupUser>
    </el-dialog>

    <el-row>
      <el-col :span="3">
        <el-button type="primary" @click="dialogs.addGroup = true;tempGroup=null;isChange=false">新建组</el-button>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="3">
        <el-input placeholder="组织名" v-model="search.name">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="3" :offset="1">
        <el-input placeholder="上级组织名" v-model="search.fatherName">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col>
        <el-table :data="list" stripe empty-text :border="true">
          <el-table-column fixed prop="name" label="组织名" align="center"></el-table-column>
          <el-table-column prop="sourceId" label="记号" align="center">
            <template slot-scope="scope">
              <p>{{scope.row.sourceId?scope.row.sourceId:'暂无数据'}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="lastGroupName" label="上级组织名" align="center">
            <template slot-scope="scope">
              <p>{{scope.row.lastGroupName?scope.row.lastGroupName:'暂无数据'}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="350px">
            <template slot-scope="scope">
              <el-button
                type="danger"
                @click="deleteGroup(scope.row.id)"
                icon="el-icon-delete"
                size="mini"
                circle
              ></el-button>
              <el-button
                type="primary"
                @click="dialogs.addGroup = true;tempGroup = scope.row;isChange=true"
                icon="el-icon-edit"
                size="mini"
                circle
              ></el-button>
              <el-button
                type="primary"
                @click="dialogs.groupConfig=true;tempGroupId = scope.row.id"
                size="mini"
              >组织关系</el-button>
              <el-button
                type="primary"
                @click="dialogs.groupUser = true;tempGroupId = scope.row.id;"
                size="mini"
              >组织成员</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="search.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="search.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import GroupAdd from "./add";
import GroupRelationalTree from "./relational-tree";
import GroupUser from "./user";

export default {
  name: "GroupIndex",
  components: { GroupAdd, GroupRelationalTree, GroupUser },
  data() {
    return {
      dialogs: {
        addGroup: false,
        groupConfig: false,
        groupUser: false
      },
      isOpenGroup: false,
      search: {
        name: "",
        fatherName: "",
        page: 1,
        size: 10
      },
      total: 0,
      list: [],
      tempGroupId: null,
      tempGroup: null,
      isChange: false,
      sonData: {
        groupId: null
      }
    };
  },
  created() {
    this.searchGroup();
  },
  computed: {
    nameChange() {
      return this.search.name;
    },
    fatherNameChange() {
      return this.search.fatherName;
    }
  },
  watch: {
    nameChange(val) {
      this.searchGroup();
    },
    fatherNameChange(val) {
      this.searchGroup();
    }
  },
  methods: {
    handleSizeChange(val) {
      this.search.size = val;
      this.searchGroup();
    },
    handleCurrentChange(val) {
      this.search.page = val;
      this.searchGroup();
    },
    searchGroup() {
      //调用服务
      var that = this;
      this.$axios
        .get("group/findAll", {
          params: this.search
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.list = data.data;
            this.total = data.count;
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          that.$message.error("网路请求异常");
        });
    },
    deleteGroup(id) {
      //调用服务
      var that = this;
      this.$axios
        .get("group/delete", {
          params: { id: id }
        })
        .then(res => {
          let data = res.data;
          if (data.code === 0) {
            this.$message({ message: data.msg, type: "success" });
            this.searchGroup();
          } else {
            this.$message.error(data.msg);
          }
        })
        .catch(function(error) {
          console.log("axios请求异常:" + error);
          that.$message.error("网路请求异常");
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}
</style>
